import { type CrudConfig, type FormFieldConfig } from '@/components';
import type { ProColumns } from '@ant-design/pro-components';
import { Switch, Tag } from 'antd';

// 示例数据类型
export interface DemoRecord {
  id: string;
  name: string;
  email: string;
  status: 'active' | 'inactive';
  role: string;
  createTime: string;
  description?: string;
}

// 统一的页面配置对象工厂函数
export const getPageConfig = (translate: (prefix: string, key: string, params?: Record<string, any>) => string) => ({
  // CRUD配置
  crudConfig: {
    endpoints: {
      list: '/api/demo/users',
      create: '/api/demo/users',
      update: '/api/demo/users/:id',
      delete: '/api/demo/users/:id',
      detail: '/api/demo/users/:id',
    },
    callbacks: {
      beforeCreate: async (data: any) => ({
        ...data,
        id: Math.random().toString(36).substr(2, 9),
        createTime: new Date().toLocaleString(),
      }),
      afterCreate: async (response: any) => console.log(translate('demo', 'createSuccess'), response),
      beforeUpdate: async (data: any) => data,
      afterUpdate: async (response: any) => console.log(translate('demo', 'updateSuccess'), response),
      beforeDelete: async () => true,
      afterDelete: async (response: any, id: string) => console.log(translate('demo', 'deleteSuccess'), id),
      onError: (error: any, operation: string) =>
        console.error(translate('demo', 'operationFailed', { operation }), error),
    },
  } as CrudConfig,

  // 搜索字段配置
  searchFields: [
    {
      name: 'name',
      label: translate('demo', 'searchName'),
      type: 'input' as const,
      placeholder: translate('demo', 'searchNamePlaceholder'),
    },
    {
      name: 'email',
      label: translate('demo', 'searchEmail'),
      type: 'input' as const,
      placeholder: translate('demo', 'searchEmailPlaceholder'),
    },
    {
      name: 'status',
      label: translate('demo', 'searchStatus'),
      required: true,
      type: 'select' as const,
      options: [
        { label: translate('demo', 'searchStatusAll'), value: 'all' },
        { label: translate('demo', 'searchStatusActive'), value: 'active' },
        { label: translate('demo', 'searchStatusInactive'), value: 'inactive' },
      ],
    },
    {
      name: 'role',
      label: translate('demo', 'searchRole'),
      type: 'select' as const,
      visible: (values: Record<string, any>) => values.status === 'active',
      dependencies: ['status'],
      options: [
        { label: translate('demo', 'searchRoleAll'), value: '' },
        { label: translate('demo', 'searchRoleAdmin'), value: 'admin' },
        { label: translate('demo', 'searchRoleUser'), value: 'user' },
        { label: translate('demo', 'searchRoleGuest'), value: 'guest' },
      ],
    },
    {
      name: 'createTime',
      label: translate('demo', 'searchCreateTime'),
      type: 'dateRange' as const,
    },
  ],

  // 表格列配置
  columns: [
    {
      title: translate('demo', 'columnId'),
      dataIndex: 'id',
      width: 80,
      copyable: true,
      fixed: 'left',
    },
    {
      title: translate('demo', 'columnName'),
      dataIndex: 'name',
      width: 120,
      ellipsis: true,
      render: (text: string) => <span style={{ fontWeight: 500, color: '#1890ff' }}>{text}</span>,
    },
    {
      title: translate('demo', 'columnEmail'),
      dataIndex: 'email',
      width: 200,
      ellipsis: true,
      copyable: true,
    },
    {
      title: translate('demo', 'columnRole'),
      dataIndex: 'role',
      width: 100,
      render: (text: string) => {
        const colorMap = {
          admin: 'red',
          user: 'blue',
          guest: 'green',
        };
        const labelMap = {
          admin: translate('demo', 'searchRoleAdmin'),
          user: translate('demo', 'searchRoleUser'),
          guest: translate('demo', 'searchRoleGuest'),
        };
        return <Tag color={colorMap[text as keyof typeof colorMap]}>{labelMap[text as keyof typeof labelMap]}</Tag>;
      },
    },
    {
      title: translate('demo', 'columnStatus'),
      dataIndex: 'status',
      width: 100,
      render: (_: any, record: DemoRecord) => (
        <Switch
          checked={record.status === 'active'}
          checkedChildren={translate('demo', 'statusActive')}
          unCheckedChildren={translate('demo', 'statusInactive')}
          size="small"
          onChange={(checked: boolean) => {
            console.log(translate('demo', 'statusChange'), record.id, checked ? 'active' : 'inactive');
          }}
        />
      ),
    },
    {
      title: translate('demo', 'columnDescription'),
      dataIndex: 'description',
      width: 200,
      ellipsis: true,
    },
    {
      title: translate('demo', 'columnCreateTime'),
      dataIndex: 'createTime',
      width: 160,
      valueType: 'dateTime',
      sorter: true,
    },
  ] as ProColumns<DemoRecord>[],

  // 表单字段配置
  formFields: [
    {
      name: 'name',
      label: translate('demo', 'formName'),
      type: 'input' as const,
      placeholder: translate('demo', 'formNamePlaceholder'),
      props: {
        disabled: true,
      },
      rules: [{ required: true, message: translate('demo', 'formNameRequired') }],
    },
    {
      name: 'email',
      label: translate('demo', 'formEmail'),
      type: 'input' as const,
      placeholder: translate('demo', 'formEmailPlaceholder'),
      rules: [
        { required: true, message: translate('demo', 'formEmailRequired') },
        { type: 'email', message: translate('demo', 'formEmailFormat') },
      ],
    },
    {
      name: 'status',
      label: translate('demo', 'formStatus'),
      type: 'select' as const,
      options: [
        { label: translate('demo', 'formStatusActive'), value: 'active' },
        { label: translate('demo', 'formStatusInactive'), value: 'inactive' },
      ],
      rules: [{ required: true, message: translate('demo', 'formStatusRequired') }],
    },
    {
      name: 'role',
      label: translate('demo', 'formRole'),
      type: 'select' as const,
      options: [
        { label: translate('demo', 'formRoleAdmin'), value: 'admin' },
        { label: translate('demo', 'formRoleUser'), value: 'user' },
        { label: translate('demo', 'formRoleGuest'), value: 'guest' },
      ],
      rules: [{ required: true, message: translate('demo', 'formRoleRequired') }],
      visible: (values: Record<string, any>) => values.status !== 'inactive',
      dependencies: ['status'],
    },
    {
      name: 'gender',
      label: translate('demo', 'formGender'),
      type: 'select' as const,
      options: [
        { label: translate('demo', 'formGenderMale'), value: 'male' },
        { label: translate('demo', 'formGenderFemale'), value: 'female' },
        { label: translate('demo', 'formGenderOther'), value: 'other' },
      ],
      visible: (values: Record<string, any>) => values.status === 'active',
      dependencies: ['status', 'role'],
    },
    {
      name: 'department',
      label: translate('demo', 'formDepartment'),
      type: 'select' as const,
      dynamicOptions: (values: Record<string, any>) => {
        if (values.role === 'admin') {
          return [
            { label: translate('demo', 'formDepartmentManagement'), value: 'management' },
            { label: translate('demo', 'formDepartmentTech'), value: 'tech' },
            { label: translate('demo', 'formDepartmentFinance'), value: 'finance' },
          ];
        } else if (values.role === 'user') {
          return [
            { label: translate('demo', 'formDepartmentTech'), value: 'tech' },
            { label: translate('demo', 'formDepartmentMarketing'), value: 'marketing' },
            { label: translate('demo', 'formDepartmentService'), value: 'service' },
          ];
        } else {
          return [{ label: translate('demo', 'formDepartmentGuest'), value: 'guest' }];
        }
      },
      dependencies: ['role'],
      visible: (values: Record<string, any>) => values.role && values.status === 'active',
    },
    {
      name: 'phone',
      label: translate('demo', 'formPhone'),
      type: 'input' as const,
      placeholder: translate('demo', 'formPhonePlaceholder'),
      dependencies: ['role'],
    },
    {
      name: 'description',
      label: translate('demo', 'formDescription'),
      type: 'textarea' as const,
      placeholder: translate('demo', 'formDescriptionPlaceholder'),
      span: 24,
      dependencies: ['status'],
    },
    {
      name: 'skills',
      label: translate('demo', 'formSkills'),
      type: 'editTable' as const,
      span: 24,
      editTableConfig: {
        columns: [
          {
            title: translate('demo', 'formSkillsName'),
            dataIndex: 'skillName',
            type: 'input' as const,
            width: 200,
            required: true,
          },
          {
            title: translate('demo', 'formSkillsLevel'),
            dataIndex: 'level',
            type: 'select' as const,
            width: 150,
            options: [
              { label: translate('demo', 'formSkillsLevelBeginner'), value: 'beginner' },
              { label: translate('demo', 'formSkillsLevelIntermediate'), value: 'intermediate' },
              { label: translate('demo', 'formSkillsLevelAdvanced'), value: 'advanced' },
              { label: translate('demo', 'formSkillsLevelExpert'), value: 'expert' },
            ],
            required: true,
          },
          {
            title: translate('demo', 'formSkillsYears'),
            dataIndex: 'years',
            type: 'number' as const,
            width: 120,
          },
          {
            title: translate('demo', 'formSkillsAcquiredDate'),
            dataIndex: 'acquiredDate',
            type: 'date' as const,
            width: 150,
          },
        ],
        rowKey: 'id',
        maxRows: 10,
        minRows: 1,
        addButtonText: translate('demo', 'formSkillsAddButton'),
      },
    },
  ] as FormFieldConfig[],

  // 字典枚举配置
  dictEnum: {
    // 可以在这里添加字典枚举配置
    // crcdOrgNo: DICT_CONSTANTS.DICT_ENUM_MAP.crcdOrgNo,
  },
});
